<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="example">
    <p>Original message:"{{ message }}"</p>
    <p>Computed reversed message: "{{reversedMessage}}"</p>
</div>

<div id="demo">
    {{ fullName}}
</div>

<script>
    var vm = new Vue({
        el:"#example",
        data:{
            message:'Hello'
        },
        computed:{
            reversedMessage:function(){
                return this.message.split('').reverse().join('')
            }
        }
    })

    var vm2=new Vue({
        el:"#demo",
        data:{
            firstName:"Foo",
            lastName:"Bar",
        },
        computed:{
            fullName:function(){
                return this.firstName + " " + this.lastName
            } 
        }
        
    })
</script>